<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link href="../../../../bower_components/fontawesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
    <link href="../autoComplete.css" rel="stylesheet" type="text/css"/>
    <script src="../../../../bower_components/jquery/dist/jquery.min.js" type="text/javascript"></script>
    <script src="../autoComplete.js" type="text/javascript"></script>
    <script src="../i18n/message.zh_CN.js" type="text/javascript"></script>
</head>
<body>
<h1>基础功能</h1>
<h3>访问地址：http://localhost:8080/lamb/js/global/plugins/autoComplete/demo/demo.html
    （必须运行服务且<span style="color:red">登录</span>后自动提示才能有数据）</h3>
<h5>信息会打印在控制台，请打开firebug或开发人员工具</h5>
<input type="text" data-gautoflag="gAutoUsername" id="username"/>

<input type="button" value="初始化username" id="initBtn"/>
<input type="button" value="初始化页面中所有带有'data-gautoflag'属性的input" id="initAllBtn"/>
<input type="button" value="设置选中回调函数" id="callbackBtn"/>
<input type="button" value="设置提示div不随滚动条滚动" id="scrollBtn"/>
<input type="button" value="获取hiddenValue" id="getHiddenValue"/>
<br/>
<hr/>
<style>
    .test{
        border:2px solid red;
    }
</style>
对自动提示框进行自定义样式：在input上加入data-g-class属性，属性值即为要添加的class，例如
<input type="text" data-gautoflag="gAutoUsername" id="username2" data-g-class="test"/>

<script>
    $(function(){
        $("#username2").gAuto();
        $("#initBtn").click(function(){
            $("#username").gAuto();
            console.log("设置初始化成功，请输入内容后测试");
        });

        $("#initAllBtn").click(function(){
            $.gAuto();
            console.log("初始化成功，请输入内容后测试");
        });


        $("#callbackBtn").click(function(){
            $("#username").gAuto({
                selectedCallback:function($autoText){
                    console.log("selected!");
                    console.log("text:"+$autoText.val());
                    console.log("hiddenValue:"+$autoText.getGAutoHiddenValue());
                }
            });
            console.log("设置选中回调函数成功，请输入内容后测试");
        });

        $("#scrollBtn").click(function(){
            $("#username").gAuto({
                staticWithScroll:true
            });
            console.log("设置提示div不随滚动条滚动成功，请输入内容后测试");
        });
        $("#getHiddenValue").click(function(){
            console.log("hiddenValue是："+$("#username").getGAutoHiddenValue())
        })
    })
</script>
<hr/>
<h1>高级功能</h1>
动态自动提示：可根据页面其他条件动态查询并返回结果<br/>
1.input上增加reqUrl属性（可以利用脚本动态更改url后面的参数）：
<pre>
    &lt;input type="text" data-gautoflag="" id="username3" reqUrl="customAutoComplete/getTeamList?param=1"/&gt;&lt;br/&gt;
</pre>
2.在CustomAutoCompleteController中增加getTeamList方法，示例如下：
<pre>
    @RequestMapping("/getTeamList")
    @ResponseBody
    public List&lt;AutoComplete&gt; getTeamList(AutoComplete autoCompleteParam,String companyCode){
        return customAutoCompleteService.getTeamList(autoCompleteParam);
    }
</pre>
3.在CustomAutoCompleteServiceImpl中增加如下代码
<pre>
    public List&lt;AutoComplete&gt; getTeamList(AutoComplete autoCompleteParam) {
        List&lt;AutoComplete&gt; autoCompleteList = autoCompleteDao.getTeamList();
        initAutoCompleteSpell(autoCompleteList);
        return getMatchAutoCompleteList(autoCompleteParam, autoCompleteList);
    }
</pre>
4.在dao方法中加入相应的方法

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>
